<template>
  <div ref="chartDom" style="width: 100%; aspect-ratio: 10 / 7"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";

const chartDom = ref<HTMLElement>();
const props = defineProps({
  typeCount: {
    type: Object,
    default: () => ({
      allTypeCount: 0,
      type0Count: 0,
      type1Count: 0,
      type2Count: 0,
      type3Count: 0,
      otherTypeCount: 0,
    }),
  },
});

const chartInstance = ref<echarts.ECharts | null>(null);
const chartTestColor = "#808080";

const option = reactive({
  title: {
    text: "平台用户类型统计图",
    subtext: "平台总用户数：0",
    left: "center",
    textStyle: {
      color: chartTestColor,
    },
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "94%",
    left: "center",
    textStyle: {
      color: chartTestColor,
    },
  },
  series: [
    {
      name: "平台用户类型统计图",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      padAngle: 2,
      itemStyle: {
        borderRadius: 10,
      },
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [] as any[],
    },
  ],
});

function initCharts() {
  if (!chartDom.value) return;

  // 销毁旧实例
  if (chartInstance.value) {
    chartInstance.value.dispose();
  }

  // 创建新实例
  chartInstance.value = echarts.init(chartDom.value);
  chartInstance.value.setOption(option);

  // 添加窗口resize监听
  window.addEventListener("resize", resizeChart);
}

function resizeChart() {
  chartInstance.value?.resize();
}

function updateChartData(typeCount: typeof props.typeCount) {
  option.title.subtext = `平台总用户数：${typeCount.allTypeCount || 0}`;
  option.series[0].data = [
    {
      value: typeCount.type0Count || 0,
      name: "玩家",
      itemStyle: { color: "#409eff" },
      label: { color: "#409eff" },
    },
    {
      value: typeCount.type1Count || 0,
      name: "独立游戏作者",
      itemStyle: { color: "#9b59b6" },
      label: { color: "#9b59b6" },
    },
    {
      value: typeCount.type2Count || 0,
      name: "游戏开发商",
      itemStyle: { color: "#3375b9" },
      label: { color: "#3375b9" },
    },
    {
      value: typeCount.type3Count || 0,
      name: "平台管理员",
      itemStyle: { color: "#67c23a" },
      label: { color: "#67c23a" },
    },
    {
      value: typeCount.otherTypeCount || 0,
      name: "其他",
      itemStyle: { color: "#f56c6c" },
      label: { color: "#f56c6c" },
    },
  ];

  // 更新图表数据
  if (chartInstance.value) {
    chartInstance.value.setOption(option);
  }
}

// 初始化
onMounted(() => {
  initCharts();
  updateChartData(props.typeCount);
});

// 监听props变化
watch(
  () => props.typeCount,
  (newVal) => {
    updateChartData(newVal);
  },
  { deep: true }
);

// 清理
onUnmounted(() => {
  if (chartInstance.value) {
    chartInstance.value.dispose();
    window.removeEventListener("resize", resizeChart);
  }
});
</script>
